<!-- 富文本视频渲染组件 -->
<template>
	<view class="rich-text-container">
		<!-- 循环渲染拆分后的内容块 -->
		<view v-for="(item, index) in parsedList" :key="index" class="content-block">
			<!-- 文本块：用 rich-text 渲染 -->
			<rich-text v-if="item.type === 'text'" :nodes="formatRichText(item.content)" class="rich-text"></rich-text>

			<!-- 视频块：用小程序原生 video 组件渲染 -->
			<view class="position-relative" v-else-if="item.type === 'video'">
				<!--#ifdef MP-ALIPAY-->
				<cover-image v-if="show && !isPlaying" class="play-btn" src="/static/images/play2.png" @tap="playFn" />
				<cover-image v-if="show && isPlaying" class="play-btn" src="/static/images/play1.png" @tap="playFn" />
				<!--#endif-->
				<video :id="`video1`" :src="item.src" :style="{ width: item.width, height: item.height }" :poster="item.poster"
					controls :show-center-play-btn="false" :autoplay="false" :loop="false" :muted="false" class="rich-video"
					@error="handleVideoError(index)"></video>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		parseRichTextWithVideo
	} from '@/utils/rich-text-parser.js';

	export default {
		name: 'RichTextWithVideo',
		props: {
			// 原始富文本字符串（含 <video> 标签）
			html: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				show: true,
				isPlaying: false,
				videoContext: null, // 视频上下文对象（用于控制播放/暂停）
				parsedList: [] // 解析后的内容块数组
			};
		},
		watch: {
			// 监听富文本变化，重新解析
			html: {
				immediate: true,
				handler(newVal) {
					this.parsedList = parseRichTextWithVideo(newVal);
					if (this.parsedList.some(i => i.type == 'video')) {
						this.$nextTick(() => {
							setTimeout(() => {
								this.videoContext = uni.createVideoContext("video1");
							}, 2000)
						})
					}
				}
			}
		},
		mounted() {

		},
		methods: {
			playFn() {
				if (!this.isPlaying) {
					this.videoContext.play();
					this.show = false
				} else {
					// 暂停视频
					this.videoContext.pause();
				}
				this.isPlaying = !this.isPlaying
			},
			/**
			 * 格式化富文本（可选：处理图片宽高、换行等）
			 * @param {string} html - 富文本片段
			 * @returns {string} - 格式化后的富文本
			 */
			formatRichText(html) {
				if (!html) return '';
				// 1. 处理图片：默认宽100%，避免超出容器
				html = html.replace(/<img\s+/gi, '<img style="max-width: 100%; height: auto;" ');
				// 2. 处理换行：<br> 替换为 <br/>（部分小程序兼容）
				html = html.replace(/<br>/gi, '<br/>');
				// 3. 处理表格：默认宽100%
				html = html.replace(/<table\s+/gi, '<table style="width: 100%; border-collapse: collapse;" ');
				return html;
			},

			/**
			 * 视频加载失败处理
			 * @param {number} index - 视频索引
			 */
			handleVideoError(index) {
				console.error(`第 ${index + 1} 个视频加载失败`);
				// 可替换为错误提示图片
				this.parsedList[index].type = 'text';
				this.parsedList[index].content = '<div style="color: #ff4d4f; text-align: center; padding: 20rpx;">视频加载失败</div>';
			}
		}
	};
</script>

<style scoped>
	.play-btn {
		width: 40px;
		height: 40px;
		position: absolute;
		left: 50%;
		top: 100px;
		transform: translateX(-15px);
		z-index: 9;
	}

	.rich-text-container {
		padding: 20rpx;
		line-height: 1.8;
		font-size: 28rpx;
	}

	.content-block {
		margin-bottom: 20rpx;
	}

	.rich-text {
		/* 富文本默认样式 */
		color: #333;
	}

	.rich-video {
		/* 视频默认样式：居中、圆角 */
		margin: 10rpx auto;
		border-radius: 12rpx;
		overflow: hidden;
		background-color: #f5f5f5;
	}
</style>